<template>
  <div>

    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">社团管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>添加社团</el-breadcrumb-item>
    </el-breadcrumb>
    <br/>
    <span>社团名称 &nbsp;&nbsp;</span>
    <el-input class="inputMax" v-model="name" placeholder="请输入社团名称"></el-input>
    <br/>
    <br/>
    <span>社团类型 &nbsp;&nbsp;</span>
    <el-select v-model="clubType" placeholder="请选择" class="inputMax">
      <el-option
          v-for="item in clubTypes"
          :key="item.id"
          :label="item.name"
          :value="item.name">
      </el-option>
    </el-select>
    <br/>
    <br/>
    <span>社团账号 &nbsp;&nbsp;</span>
    <el-input class="inputMax" v-model="username" placeholder="请输入社团账号"></el-input>
    <br/>
    <br/>
    <span>初始密码 &nbsp;&nbsp;</span>
    <el-input class="inputMax" v-model="pwd" placeholder="请输入初始密码"></el-input>
    <br/>
    <br/>
    <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入社团简介"
        autosize
        v-model="content">
    </el-input>
    <br/>
    <br/>
    <el-button type="primary" @click="addClub" v-if="id===0" >添加</el-button>
    <el-button type="primary" @click="addClub" v-else>修改</el-button>
    <el-button @click="blackClubList">取消</el-button>
  </div>
</template>

<script>
import {clubTypeList, clubInsert, clubById, clubUpdate} from "@/api";
export default {
  name: "ClubAdd",
  data() {
    return {
      id: 0,
      name: '',
      username: '',
      content:'',
      pwd: '',
      clubTypes: [],
      clubType: ''
    }
  },
  created() {
      clubTypeList().then(result=>{
        this.clubTypes = result.data;
      });
      if (this.$route.query.id!=null && this.$route.query.id!='0'){
        let club = {
          id: this.$route.query.id,
        };
        clubById(club).then((result)=>{
          this.id = result.data.id;
          this.name = result.data.name;
          this.username = result.data.username;
          this.pwd = result.data.pwd;
          this.content = result.data.content;
          this.clubType = result.data.type;
        })
      }
  },
  methods: {
    addClub(){
      let club = {
        id: this.id,
        name: this.name,
        type: this.clubType,
        username: this.username,
        pwd: this.pwd,
        content: this.content
      };
      if (this.id === 0) {
        this.name = '';
        this.clubType = '';
        this.username = '';
        this.pwd = '';
        this.content = '';
        clubInsert(club);
      }else {
        this.$confirm('此操作将永久修改社团信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          clubUpdate(club).then(()=>{
            clubById(club).then((result)=>{
              this.id = result.data.id;
              this.name = result.data.name;
              this.username = result.data.username;
              this.pwd = result.data.pwd;
              this.content = result.data.content;
              this.clubType = result.data.type;
            })
          });
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });
        });
      }
    },

    blackClubList(){
      this.$router.push('/club/list')
    }
  }
}
</script>

<style scoped>
.inputMax{
  width: 200px;
}
</style>
